<style scoped>
.divbox{
  width: 100%;
  height: 500px;
  position: relative;
}
</style>
<template>
  <div>
    <Row :gutter="20">
      <i-col
        :xs="12"
        :md="8"
        :lg="6"
        v-for="(infor, i) in inforCardData"
        :key="`infor-${i}`"
        style="height: 120px; padding-bottom: 10px"
      >
        <infor-card
          shadow
          :color="infor.color"
          :icon="infor.icon"
          :icon-size="36"
        >
          <count-to :end="infor.count" count-class="count-style" />
          <p>{{ infor.title }}</p>
        </infor-card>
      </i-col>
    </Row>
    <Card shadow  >
      <div class="divbox"
        ref="divchart"
        style="min-height: 500px; "
      ></div>
    </Card>
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import tdTheme from '_c/charts/theme.json'
import { GetHomeData } from '@/api/data'
import * as echarts from 'echarts'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'home',
  components: {
    InforCard,
    CountTo
  },
  data () {
    return {
      chartbar: null,
      inforCardData: [],

      listSaleAmount: [],
      listPayAmount: []
    }
  },
  methods: {
    GetHomeData () {
      let vm = this

      GetHomeData().then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          var info = data.Data
          vm.inforCardData = [
            {
              title: '累计客户数量',
              icon: 'md-people',
              count: info.CustomerCount,
              color: '#2d8cf0'
            },
            {
              title: '客户账目',
              icon: 'logo-usd',
              count: info.CustomerBalance,
              color: '#19be6b'
            },
            {
              title: '本月销售额',
              icon: 'ios-cash',
              count: info.SaleOrderFee,
              color: '#ff9900'
            },

            {
              title: '本月销售单数量',
              icon: 'md-paper',
              count: info.SaleOrderCount,
              color: '#E46CBB'
            }
          ]
          vm.listSaleAmount = info.listSaleAmount
          vm.listPayAmount = info.listPayAmount
          vm.initChart()
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    },
    initChart () {
      let vm = this
      vm.chartbar = echarts.init(vm.$refs.divchart, tdTheme)
      vm.chartbar.setOption({
        title: {
          text: '本月数据'
        },
        legend: {
          // Try 'horizontal'
          orient: 'horizontal',
          left: 'center',
          top: 0
        },
        tooltip: {},
        xAxis: {
          data: vm.listSaleAmount.map(item => { return item.OrderDate })
        },
        yAxis: [{
          type: 'value',
          name: '数量',
          minInterval: 1

        },
        {
          type: 'value',
          name: '金额'

        }],
        series: [
          {
            name: '销售额',
            type: 'bar',
            yAxisIndex: 1,
            data: vm.listSaleAmount.map(item => { return item.AllFee })
          },
          {
            name: '销售单数量',
            type: 'line',
            data: vm.listSaleAmount.map(item => { return item.OrderCount })
          }
        ]
      })
      window.addEventListener('resize', vm.chartbar.resize)
    }
  },
  mounted () {
    this.GetHomeData()
  }

}
</script>

<style lang="less">
.count-style {
  font-size: 36px;
}
</style>
